<template>
	<view class="content page">
		<status-bar title='优惠券'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="nav_top_box" :style="{top:navHeight+System.statusBarHeight+'px'}">
			<view class="navlists" :class="navTab==1?'navAction thmeColor':''" :style="{'--color': color}" @click="navclick(1,0)"><text>可用</text></view>
			<view class="navlists" :class="navTab==2?'navAction thmeColor':''" :style="{'--color': color}" @click="navclick(2,1)"><text>已使用</text></view>
			<view class="navlists" :class="navTab==3?'navAction thmeColor':''" :style="{'--color': color}" @click="navclick(3,2)"><text>已过期</text></view>
			<view class="Advertising_article thmeBg" :style="{'--color': color,left: 33.33 * (navTab - 1)+'%'}"></view>
		</view>
		<view class="discount_coupon_list">
			<empty v-if='nothing' type='1' cat='3' msg='你还没有相关优惠券哦 ~'></empty>
			
			<view class="itemList_box" v-for="(item,index) in pageData" :key="index">
				<view class="couponListBg" :style="{background:parseInt(item.state) == 1? item.color:'rgba(153,153,153,0.5)'}"></view>
				<view class="right_top statre1" :style="{'border-top-color':parseInt(item.state) == 1 ? item.color:'rgba(153,153,153,0.5)'}">
					<text>{{item.type==1?'抵用券':item.type==2?'折扣券':item.type==3?'兑换券':item.type==4?'免邮券':''}}</text>
				</view>
				
				
				<view class="flex-box align-center p-top20 p-bot20">
					<view class="cont_money flex-box d-flex a-center j-centert ">
						<view class="flex ">
							<view class="moneylimit" :style="{'color':parseInt(item.state) == 1?item.color:'rgba(153,153,153,0.5)'}">
								{{item.unit}}
								<text v-if="item.price.toString().length > 3" style="font-size:48rpx;">{{item.price}}</text>
								<text v-else style="font-size:66rpx;">{{item.price}}</text>
								{{item.type!=1?item.priElse:''}}
							</view>
							<view class="cont_right">
								<view class="discount_coupon_btn" v-if="item.state == 0" style="background: #999999">已关闭</view>
								<!-- <view class="discount_coupon_btn" v-if="item.state == 1 && item.restrict != 4" :style="{'background': item.color?item.color:''}" @click="backHome">去使用</view> -->
								<view class="discount_coupon_btn" v-if="item.state == 1 && item.restrict== 4" :style="{'background': item.color?item.color:''}" @click="showCode(index)">核销码</view>
								<view class="discount_coupon_btn" v-if="item.state == 2" style="background: #999999">已使用</view>
								<view class="discount_coupon_btn" v-if="item.state == 3" style="background: #999999">已过期</view>
								<view class="discount_coupon_btn" v-if="item.state == 4" style="background: #999999">未开始</view>
							</view>
						</view>
					</view>
					<view class="cont_describe">
						<view class="discount_coupon_title lines" :style="{'color':parseInt(item.state) == 1?item.color:'rgba(153,153,153,0.5)','width:':'100%'}">
							{{item.title}}
						</view>
						<view class="discount_coupon_info flex-box align-center" :style="{'color':parseInt(item.state) == 1?item.color:'rgba(153,153,153,0.5)'}">
							<text class="lines">{{item.company}}</text>
						</view>
						<view class="discount_coupon_time" :style="{'color':parseInt(item.state) == 1?item.color:'rgba(153,153,153,0.5)'}">
							{{item.expiryDate}}
						</view>
					</view>
				</view>
				
				<view class="mid-line flex-box align-center">
					<view class="circle circle1"></view>
					<view class="line flex"></view>
					<view class="circle circle2"></view>
				</view>
				
				<view class="discount_coupon_intro flex-box" @click="currIndex=currIndex==index?-1:index" :class="{active:currIndex == index}">
					<view class="txt flex" v-html="item.info" :class="{lines:currIndex != index}"></view>
					<text class="icon-xiangxia iconfont"></text>
				</view>
				
				<view class="halfCicle" :style="{
					'background': 'url('+staticUrl+'/images/conpon_half_circle1.png) repeat-x',
					'background-size': '28rpx 4rpx'
				}"></view>
			</view>	
		</view>
		<view class="DiLine" v-if="bottomtip">------ 我是有底线的 ------</view>
		
		
		<!--  线下核销 显示二维码 -->
		<view class="masking d-flex j-centert a-center" v-if="qrCode">
			<view class="row f-column a-center">
				<view class="padding100 d-flex f-column a-center bgwhite bor_radius_10">
					<image :src="imgUrl+qrCodeImg" class="qrCodeImg"></image>
					<view class="row j-centert h5 color_33  bold">{{qrCodeNumber}}</view>
				</view>
				<view class="iconfont icon-guanbi white size60 padding30" @click="closureQr"></view>
			</view>
			
		</view>
	</view>
</template>
<script>
	var that;
	import {mapState} from 'vuex';
	export default{
		data(){
			return{
				imgUrl:this.imgUrl,
				
				color: getApp().globalData.color,
				
				navTab:1,
				vid:'',
				
				pageData:[],
				nothing: false,
				page:1,
				bottomtip:false,
				toTop: false,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				bid: uni.getStorageSync('bid'),
				currIndex: -1,
				more: false,
				
				qrCode:false,
				qrCodeImg:'',
				qrCodeNumber:'',
			}
		},
		onShow(){
			
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(e) {
			that = this
			that.vid = uni.getStorageSync("vid")
			that.getPageData()
			
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share']),
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				uni.showLoading({
					mask:true,
					title:"列表加载中..."
				})
				that.page = that.page+1;
				that.getPageData()
			}
		},
		methods:{
			showCode(index){
				let qrData = that.pageData[index];
				that.qrCodeImg = qrData.qrCodeImg;
				that.qrCodeNumber = qrData.sn_code;
				that.qrCode = true;
			},
			closureQr(){  //  关闭 二维码 ，从新获取一次数据，检查是否被核销
				that.$http.post({
					url: '/SRA_simMallApi/myCouponsList',
					data: {
						vId: that.vid,
						status: that.navTab,// 0 可用 1 未开始 2已使用 3 已过期
						pageIndex: that.page,
						pageSize: 10,
						bid: that.bid,
					}
				}).then(res=>{
					if(res.data){
						that.pageData = res.data;
					}
				})
				that.qrCode = false;
			},
			navclick(i, positions){
				that.currIndex = -1
				that.navTab = i
				that.pageData = []
				that.page = 1
				that.bottomtip = false
				that.getPageData()
			},
			getPageData(){
				that.nothing = false
				that.more = false
				that.bottomtip = false
				that.$http.post({
					url: '/SRA_simMallApi/myCouponsList',
					data: {
						vId: that.vid,
						status: that.navTab,// 0 可用 1 未开始 2已使用 3 已过期
						pageIndex: that.page,
						pageSize: 10,
						bid: that.bid,
					}
				}).then(res => {
					if(res.data){
						that.pageData = that.pageData.concat(res.data)
						if(that.pageData.length > 10 && res.data.length < 10){
							that.bottomtip = true
						}
					} else {
						if(that.pageData.length < 1){
							that.nothing = true
						}
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.qrCodeImg{
		width:400rpx;
		height:400rpx;
	}
	.page{
		background-color: #f5f5f5;
	}
	.nav_top_box{
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		display: flex;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #333333;
		position: fixed;
		top: 0;left: 0;right: 0;
		z-index: 99;
	}
	.navlists{
		width: 33.33%;
	}
	.navAction{
		position: relative;
	}
	.Advertising_article{
		width: 33.33%;
		height: 4upx;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: left .2s;
	}
	.discount_coupon_list{
		width: 100%;
		padding: 100upx 20upx 20upx 20upx;
	}
	.itemList_box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20upx;
		position: relative;
		margin-bottom: 30rpx;
		overflow: hidden;
	}
	.cont_describe{
		width: calc(100% - 200rpx);
		padding-left: 8rpx;
	}
	.cont_right{
		color: #ED702D;
		text-align: center;
		margin-top: 4rpx;
		position: relative;
		z-index: 5;
	}
	.cont_money {
		width: 200rpx;
		// height: 170rpx;
		border-radius: 20upx;
		text-align: center;
		color: #ED702D;
		align-items: flex-end;
		padding-bottom: 10rpx;
	}
	.moneylimit text{
		margin: 0 6upx;
		font-size: 70upx;
		font-weight: bold;
	}
	.discount_coupon_title {
		font-size: 34rpx;
		font-weight: bold;
		padding-right: 30rpx;
	}

	.discount_coupon_time{
		font-size: 28rpx;
	}
	.discount_coupon_info{
		height: 60rpx;
		padding-right: 30rpx;
		text{
			color: inherit;
			font-size: 28rpx;
			
			line-height: 30rpx;
			font-weight: 400;
		}
	}
	.expire{
		font-size: 20upx;
	}
	.discount_coupon_btn{
		padding: 0 30rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius:48rpx;
		color: #FFFFFF;
		display: inline-block;
		position: relative;
	}
	.right_top{
		width: 0;
		height: 0;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9;
		border-top: 80upx solid #EC612A;
		border-left: 80upx solid transparent; 
	}
	.right_top text{
		position: absolute;
		transform: rotate(45deg);
	}
	.statre text{
		left: -48upx;
		top: -70upx;
		font-size: 24upx;
	}
	.statre1 text{
		left: -50upx;
		top: -62upx;
		font-size: 16rpx;
	}
	.mid-line{
		.line{
			height: 2rpx;
			border-top: 2rpx dashed rgba(0,0,0,.1);
		}
		.circle{
			width: 24rpx;
			height: 24rpx;
			background: #F5F5F5; 
			top: 50%;
			border-radius: 50%;
			z-index: 5;
		}
		.circle1{
			margin-left: -12rpx;
		}
		.circle2{
			margin-right: -12rpx;
		}
	}
	.discount_coupon_intro{
		height: 60rpx;
		position: relative;
		z-index: 5;
		padding: 10rpx 20rpx 0;
		min-height: 60rpx;
		transition: all 0.2s;
		.txt{
			color: #9E9D9D;
			height: 30rpx;
			text-align: justify;
		}
		.icon-xiangxia{
			font-size: 28rpx;
			color: #9E9D9D;
			transition: all 0.2s;
		}
		&.active{
			height: auto;
			align-items: center;
			flex-direction: column;
			.txt{
				height: auto;
				width: 100%;
			}
			.icon-xiangxia{
				transform: rotate(180deg);
				margin: 10rpx;
			}
		}
	}
	.halfCicle{
		height: 4rpx;
		position: relative;
		z-index: 5;
	}
	.couponListBg{
		width: 100%;
		height: 100%;
		opacity: 0.03;
		position: absolute;
		z-index: 1;
	}
</style>
